﻿<!-- #layout name=empty -->
<div class="page-loading" style="display: none;">
  <div class="content">
    <p><i class="fa fa-spinner fa-spin"></i> <span>Registering...</span></p>
  </div>
</div>
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
      <div class="block-small-form">
        <div class="logo">
          <img src="/_Admin/Images/logo-blue.png" alt="Logo" />
        </div>
        <kb-form :model="model" :rules="rules" ref="form">
          <kb-form-item prop="username">
            <label class="sr-only">Username</label>
            <input
              class="form-control"
              type="text"
              placeholder="Username"
              v-model="model.username"
            />
          </kb-form-item>
          <kb-form-item prop="email">
            <label class="sr-only">Email</label>
            <input
              class="form-control"
              type="text"
              placeholder="Email address"
              v-model="model.email"
            />
          </kb-form-item>
          <kb-form-item prop="password">
            <label class="sr-only">Password</label>
            <input
              class="form-control"
              type="password"
              placeholder="Password"
              v-model="model.password"
            />
          </kb-form-item>
          <kb-form-item prop="confirmPassword">
            <label class="sr-only">Password</label>
            <input
              class="form-control"
              type="password"
              placeholder="Confirm your password"
              v-model="model.confirmPassword"
            />
          </kb-form-item>
          <kb-form-item>
            <p class="form-control-static"
              ><span>By clicking 'Sign up', you agree to our</span>
              <a href="#">terms of service</a> <span>and</span>
              <a href="#">privacy policy</a>.</p
            >
          </kb-form-item>
          <kb-form-item>
            <a class="btn gray pull-left" :href="Kooboo.Route.User.LoginPage"
              >Back</a
            >
            <button class="btn blue pull-right" @click="onSubmit"
              >Sign up</button
            >
          </kb-form-item>
        </kb-form>
      </div>
    </div>
  </div>
</div>

<script src="/_Admin/Scripts/components/kbForm.js"></script>

<script>
  new Vue({
    el: "#app",
    data: function() {
      var me = this;
      return {
        model: {
          username: "",
          password: "",
          email: "",
          confirmPassword: ""
        },
        rules: {
          username: [
            { required: Kooboo.text.validation.required },
            {
              min: 5,
              max: 30,
              message:
                Kooboo.text.validation.minLength +
                5 +
                ", " +
                Kooboo.text.validation.maxLength +
                30
            },
            {
              pattern: /^[a-zA-Z0-9_-]+$/,
              message: Kooboo.text.validation.usernameInvalid
            },
            {
              remote: {
                url: Kooboo.User.isUniqueName(),
                data: function() {
                  return {
                    name: me.model.username
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ],
          password: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 30,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                30
            }
          ],
          confirmPassword: [
            { required: Kooboo.text.validation.required },
            {
              validate: function(value) {
                return value == me.model.password;
              },
              message: Kooboo.text.validation.notEqual
            }
          ],
          email: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^\s*[a-zA-Z0-9!#$%&'*+\-/=?^_`{|}~]+(\.[a-zA-Z0-9!#$%&'*+\-/=?^_`{|}~]+)*@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})\s*$/,
              message: Kooboo.text.validation.emailInvalid
            },
            {
              remote: {
                url: Kooboo.User.isUniqueEmail(),
                data: function() {
                  return {
                    email: me.model.email
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        }
      };
    },
    methods: {
      onSubmit: function() {
        if (this.$refs.form.validate()) {
          Kooboo.User.register(this.model).then(function(res) {
            if (res.success) {
              location.href = Kooboo.Route.User.RegisterSuccess;
            }
          });
        }
      }
    }
  });
</script>
